<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <style>
        body{
            margin: 0;
        }
        .container{
            /* background-color: rgb(223, 223, 223); */
            width: 100%;
            height: 100vh;
            padding:0px 24px;
            box-sizing: border-box;
        }
        .info{
            width: 100%;
        }
        .title{
            padding:12px 0px;
            line-height: 32px;
            font-weight: 700;
            margin: 0; 
        }
        .border-line{
            width: 100%;
            border-bottom: 1px solid rgb(172, 171, 171);
        }
        .boxs{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .box{
            flex: 1;
            line-height: 32px;
            box-sizing: border-box;
            background-color: antiquewhite;
            margin: 6px 0px;
            text-align: center;
            border-radius: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 8px;
        }
        .tianchong{
            padding: 0px 12px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="info">
                <p class="title border-line">基本信息</p>
                <div>
                    <p class="title">车辆影像</p>
                    <div class="boxs" v-for="num in Math.ceil(msgs.length/splitNum)" :key="num">
                        <template v-for="(item,index) in currentMsgList(num)">
                            <div class="box" :key="item" :style="maxWidth">
                                {{ item }}
                            </div>
                            <template v-if="index < (splitNum-1)">
                                <div class="tianchong" :style="{visibility: !msgs[(num-1)*splitNum+(index+1)] ?'hidden' : 'visible'}">|</div>
                            </template>
                        </template>   
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    splitNum:3,
                    msgs:['hellregret热特人额人wee','hello2','hello3','hello4','hello6']
                }
            },
            computed:{
                maxWidth(){
                    const maxWidths = {
                        1:'calc(100% - 12px)',
                        2:'calc(50% - 12px)',
                        3:'calc(33.33% - 12px)',
                        4:'calc(25% - 12px)',
                        5:'calc(20% - 12px)',
                        6:'calc(16.67% - 12px)',
                    }
                    return {'max-width':maxWidths[this.splitNum] || 'calc(50% - 12px)'}
                },
            },
            methods: {
                currentMsgList(num){
                    let list = this.msgs.slice((num-1)*this.splitNum,num*this.splitNum);
                    if(list.length <this.splitNum){
                        const addList = new Array(this.splitNum-list.length).map(i=>'') || [];
                        list = [...list,...addList]
                    }
                    return list;
                },
                setSplitNum(){
                    const width = window.screen.width;
                    if(width<320){
                        this.splitNum = 1;
                    } else if(width>=320 && width<=480){
                        this.splitNum = 2;
                    }else if(width>=481 && width<=768){
                        this.splitNum = 3;
                    }else if(width>=769 && width<=1024){
                        this.splitNum = 4;
                    }else if(width>=1205 && width<=1200){
                        this.splitNum = 5;
                    }else if(width>=1201){
                        this.splitNum = 6;
                    }else {
                        this.splitNum = 2;
                    }
                }
            },
            mounted() {
                this.setSplitNum();
                window.addEventListener('resize',this.setSplitNum)
            },
            beforeDestroy() {
                window.addEventListener('resize',this.setSplitNum)
            },
        })
    </script>
</body>
</html>